<template>
	<view class="page" @touchstart="touchStart" @touchend="touchEnd">
		<form>
			<view class="uni-textarea"><textarea placeholder="这一刻的想法..." v-model="input_content" /></view>
			<view class="uni-list list-pd">
				<view class="uni-list-cell cell-pd">
					<view class="uni-uploader">
						<view class="uni-uploader-head">
							<view class="uni-uploader-title"></view>
							<view class="uni-uploader-info">{{ imageList.length }}/9</view>
						</view>
						<view class="uni-uploader-body">
							<view class="uni-uploader__files">
								<block v-for="(image, index) in imageList" :key="index">
									<view class="uni-uploader__file" style="position: relative;">
										<image class="uni-uploader__img" mode="aspectFill" :src="image" :data-src="image" @tap="previewImage"></image>
										<view class="close-view" @click="close(index)">×</view>
									</view>
								</block>
								<view class="uni-uploader__input-box" v-show="imageList.length < 9"><view class="uni-uploader__input" @tap="chooseImage"></view></view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 定位 -->
			<view class="">
				<tui-list-view class="tui-list-view">
					<tui-list-cell @click="chooseLocation" :arrow="true" class="tui-list">
						<tui-icon name="gps" :size="20"></tui-icon>
						<block v-if="hasLocation === true">
							<text class="tui-list-cell-name">{{ locationAddress }}</text>
						</block>
						<block v-if="hasLocation === false"><text class="tui-list-cell-name">请选择位置</text></block>
					</tui-list-cell>
				</tui-list-view>
			</view>

			<!-- 提交按钮 -->
			<view class="footer">
				<view class="tui-btm"><tui-button type="blue" @tap="publish" :shadow="true" shape="circle">提交</tui-button></view>
			</view>
		</form>
	</view>
</template>

<script>
// import { mapState, mapMutations, mapActions } from 'vuex';
import image from '@/common/image.js';
import tuiButton from '@/components/extend/button/button';
import tuiListView from '@/components/list-view/list-view';
import tuiListCell from '@/components/list-cell/list-cell';
import tuiIcon from '@/components/icon/icon';
const QQMapWX = require('../../libs/qqmap-wx-jssdk.min.js');

var sourceType = [['camera'], ['album'], ['camera', 'album']];
var sizeType = [['compressed'], ['original'], ['compressed', 'original']];
export default {
	components: {
		tuiListView,
		tuiListCell,
		tuiIcon,
		tuiButton
	},
	data() {
		return {
			// title: 'choose/previewImage',
			input_content: '',
			imageList: [],

			sourceTypeIndex: 2,
			sourceType: ['拍照', '相册', '拍照或相册'],
			sizeTypeIndex: 2,
			sizeType: ['压缩', '原图', '压缩或原图'],
			countIndex: 8,
			count: [1, 2, 3, 4, 5, 6, 7, 8, 9],

			//侧滑返回start
			startX: 0, //点击屏幕起始位置
			movedX: 0, //横向移动的距离
			endX: 0, //接触屏幕后移开时的位置
			//end
			// 递归上传图片坐标
			currentUploadPhotoIndex: 0,
			qqmapsdk: null,
			latitude:  '',
			longitude: '',
			locationAddress:'',
			cityCode:'',
			// 当前页面是否已定位，如为默认取首页的定位信息
			hasLocation: false
		};
	},
	onLoad() {
		this.qqmapsdk = new QQMapWX({
			key: 'W4WBZ-TUD65-IDAIR-QPM36-HMFQ5-CGBZP'
		});
		// uni原生接口获取位置==>通过经纬度翻译地址
		this.getAddress();
	},
	onUnload() {
		(this.imageList = []),
			(this.sourceTypeIndex = 2),
			(this.sourceType = ['拍照', '相册', '拍照或相册']),
			(this.sizeTypeIndex = 2),
			(this.sizeType = ['压缩', '原图', '压缩或原图']),
			(this.countIndex = 8);
	},
	created() {
		// 获取默认位置
		// this.getLocation();
	},

	methods: {
		// 保存动态
		save(postData) {
			this.tui
				.request('/auth/api/plazaContent/insertPlazaContent', postData, 'POST', false, true)
				.then(res => {
					if (res.code == 0) {
						if(this.imageList!=null && this.imageList.length>0){
							this.uploadPhoto(this.imageList, res.data.contentId);
						}else{
							this.showSuccess();
						}
					} else {
						this.tui.toast('发布内容失败', 1000, true);
					}
				})
				.catch(res => {
					console.log(res);
				});
		},
		showSuccess(){
			uni.hideLoading();
			uni.showToast({
				icon: 'success',
				title: '发布成功'
			});
			setTimeout(() => {
				uni.navigateTo({
					url: 'index?type=publishPlaza'
				});
			}, 300);
		},
		uploadPhoto(tempFilePaths, contentId) {
			// setTimeout(() => {
			if (this.currentUploadPhotoIndex >= tempFilePaths.length) {
				return;
			}
			this.tui
				.uploadFile('/auth/api/plazaContent/uploadPlazaPhoto?contentId=' + contentId, tempFilePaths[this.currentUploadPhotoIndex], true)
				.then(res => {
					console.log('uploadPhoto上传结果' + JSON.stringify(res));
					if (res.code == 0) {
						this.currentUploadPhotoIndex++;
						// 递归保存图片
						this.uploadPhoto(tempFilePaths, contentId);
						// 如最后一张图则上传成功提示
						console.log(this.currentUploadPhotoIndex + '--' + tempFilePaths.length);
						if (this.currentUploadPhotoIndex == tempFilePaths.length) {
							this.showSuccess();
						}
					} else {
						uni.showToast('上传失败，原因' + res.msg);
						this.currentUploadPhotoIndex++;
						this.uploadPhoto(tempFilePaths, contentId);
					}
				})
				.catch(res => {
					console.log(res);
				});
			// }, 300);
		},

		async publish() {
			if (!this.input_content) {
				uni.showModal({ content: '内容不能为空', showCancel: false });
				return;
			}
			uni.showLoading({ title: '发布中' });
			let postData={};
			// if (this.hasLocation) {
				postData = { content: this.input_content, cityCode: this.cityCode, lat: this.latitude, lng: this.longitude, place: this.locationAddress };
			/* } else {
				postData = { content: this.input_content, cityCode: this.adcode, lat: this.latitude, lng: this.longitude, place: this.locationCity };
			} */
			this.save(postData);
		},

		// 自动获取位置
		getAddress: function() {
			let that=this;
			// uniapp 原生接口获取经纬度
			uni.getLocation({
				type: 'gcj02',
				success(res) {
					console.log('currentLocation-latitude=' + res.latitude);
					console.log('currentLocation-longitude=' + res.longitude);
					that.latitude=res.latitude;
					that.longitude=res.longitude;
					console.log('that.qqmapsdk='+JSON.stringify(that.qqmapsdk));
					// 根据经纬度获取地址信息
					that.qqmapsdk.reverseGeocoder({
						location: {
							latitude:  res.latitude,
							longitude: res.longitude
						},
						success: resTwo => {
							console.log(JSON.stringify(resTwo));
							that.hasLocation = true;
							that.cityCode=resTwo.result.ad_info.adcode;
							// that.locationAddress = resTwo.result.formatted_addresses.recommend;
							that.locationAddress = resTwo.result.address;
						},
						fail: res => {
							that.locationAddress = '获取位置信息失败';
							console.log(JSON.stringify(res));
						}
					});
				}
			});
		},

		// 选择位置
		chooseLocation: function() {
			let that=this;
			uni.chooseLocation({
				success: res => {
					console.log(JSON.stringify(res));
					that.hasLocation = true;
					that.longitude=res.longitude;
					that.latitude=res.latitude;
					// that.location = formatLocation(res.longitude, res.latitude);
					that.locationAddress = res.name;
					// 根据经纬度，获取城市city_code
					// 根据经纬度获取地址信息
					that.qqmapsdk.reverseGeocoder({
						location: {
							latitude:  res.latitude,
							longitude: res.longitude
						},
						success: resTwo => {
							console.log(JSON.stringify(resTwo));
							that.cityCode=resTwo.result.ad_info.adcode;
						},
						fail: res => {
							// this.address = '获取位置信息失败';
						}
					});
				}
			});
		},
		clear: function() {
			this.hasLocation = false;
		},

		close(e) {
			this.imageList.splice(e, 1);
		},
		chooseImage: async function() {
			if (this.imageList.length === 9) {
				let isContinue = await this.isFullImg();
				console.log('是否继续?', isContinue);
				if (!isContinue) {
					return;
				}
			}
			uni.chooseImage({
				sourceType: sourceType[this.sourceTypeIndex],
				sizeType: sizeType[this.sizeTypeIndex],
				count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex],
				success: res => {
					// #ifdef APP-PLUS
					//提交压缩,因为使用了H5+ Api,所以自定义压缩目前仅支持APP平台
					var compressd = cp_images => {
						this.imageList = this.imageList.concat(cp_images); //压缩后的图片路径
					};
					image.compress(res.tempFilePaths, compressd);
					// #endif

					// #ifndef APP-PLUS
					this.imageList = this.imageList.concat(res.tempFilePaths); //非APP平台不支持自定义压缩,暂时没有处理,可通过uni-app上传组件的sizeType属性压缩
					// #endif
				}
			});
		},
		isFullImg: function() {
			return new Promise(res => {
				uni.showModal({
					content: '已经有9张图片了,是否清空现有图片？',
					success: e => {
						if (e.confirm) {
							this.imageList = [];
							res(true);
						} else {
							res(false);
						}
					},
					fail: () => {
						res(false);
					}
				});
			});
		},
		previewImage: function(e) {
			var current = e.target.dataset.src;
			uni.previewImage({
				current: current,
				urls: this.imageList,
				indicator: 'default'
			});
		},
		touchStart: function(e) {
			this.startX = e.mp.changedTouches[0].pageX;
		},

		touchEnd: function(e) {
			this.endX = e.mp.changedTouches[0].pageX;
			if (this.endX - this.startX > 200) {
				uni.navigateBack();
			}
		}
	}
};
</script>

<style scoped>
.footer {
	margin-top: 80upx;
}

.cell-pd {
	padding: 20upx 30upx;
}

.uni-textarea {
	width: auto;
	padding: 20upx 25upx;
	line-height: 1.6;
	height: 150upx;
}
.uni-list::before {
	height: 0;
}
.uni-list:after {
	height: 0;
}
.list-pd {
	margin-top: 0;
}
.close-view {
	text-align: center;
	line-height: 30upx;
	height: 35upx;
	width: 35upx;
	background: #ef5350;
	color: #ffffff;
	position: absolute;
	top: 1upx;
	right: 1upx;
	font-size: 35upx;
	border-radius: 8upx;
}
.page {
	width: 750upx;
	height: 100%;
}

/* 发布按钮 */
.tui-btm {
	margin-bottom: 20rpx;
	padding: 0 25rpx;
}

/* 定位 */
.tui-list-view {
	padding-top: 20upx !important;
}

.tui-list-cell-name {
	padding-left: 20upx;
	vertical-align: middle;
	line-height: 30upx;
}
</style>
